import React, {Component} from 'react';
import {Link} from 'react-router-dom';
const axios = require('axios');
// https://reactjs.org/docs/dom-elements.html
/*
function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
*/
class Pcontent extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[
                {
                    id: 1,
                    img_url: '1.jpg',
                    catename: '',
                    description: '',
                    title: '拍黄瓜',
                    price: 1,
                    num: 100,
                    is_hot: '',
                    type: '1',
                    content: '<p style="color: #000;">拍黄瓜</p>'
                }
            ],
            domain: 'http://a.itying.com/',
        };
    }
    requestData=(id)=>{
        var api = this.state.domain + 'api/producelist' + id;
        axios.get(api).then((response)=>{
            console.log(response.data.result);
            this.setState({
                list: response.data.result[0]
            })
        }).catch(function(error){
            console.log(error);
        })
    }
    componentDidMount(){
        var id = this.props.match.params.id;
        console.log(id);
        // this.requestData(id);
    }
    render() {
        return (
            <div>
                <div className="back"><Link to="/">返回</Link></div>
                <div className="p-content">
                    <div className="p-info">
                        {this.state.list[0].img_url?<img src={`${this.state.domain}${this.state.list[0].img_url}`}/>:''}
                        <h2>{this.state.list[0].title}</h2>
                        <p className="price">{this.state.list[0].price}</p>
                    </div>
                    <div className="p-detail">
                        <h3>商品详情</h3>
                        <div className="content" dangerouslySetInnerHTML={{__html: this.state.list[0].content}}>
                        </div>
                    </div> 
                </div>
                <footer className="p-footer">
                    <div className="cart">
                        <strong>数量：</strong>
                        <div className="cart-num">
                            <div className="input-left">-</div>
                            <div className="input-center">
                                <input type="text"readOnly="readonly" value="1" name="num" id="num"/>
                            </div>
                            <div className="input-right">+</div>
                        </div>
                    </div>

                    <button className="addCart">加入购物车</button>
                </footer>
            </div>
        );
    }
}

export default Pcontent;